<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2020/8/20
  Time: 14:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <div id="main" style="width:600px;height: 400px"></div>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/china.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.js"></script>
    <script>
        // 创建一个Echarts对象
        var init = echarts.init(document.getElementById("main"));
        // 指定图表的配置项和数据
        // 定义变量option 在变量中 定义了图表展示的属性和数据
        var option = {
            // 图表的标题
            title: {
                text: '男女人数对比'
            },
            // 工具栏 可以为空
            // 传奇 在数学中是系列的意思
            // 数据的类别 y轴的数据代表什么意思
            // 例如： 销量 人数 注册量 访问量 阅读量 点赞量等
            legend: {
                data:['人数']
            },
            // xAxis x轴坐标
            // xAxis: {
            //     data: ["男","女"]
            // },
            // y轴坐标 自动识别自动处理 不需要定义
            //yAxis: {},
            // 给x轴赋值
            series: [{
                // 对应 legend 中的data值  必须一样
                name: '人数',
                // 图表展示的类型 bar 柱状图展示 line 折线图 pie 饼状图
                type: 'pie',
                // 给x轴坐标赋值
                data: [{name:'男',value:10},{name:'女',value:20}]
            }]
        };
        init.setOption(option);
    </script>
</body>
</html>
